<template>
  <div id="app-ckeditor">
    <ckeditor
      v-model="editorData2"
      :config="editorConfig"
      @ready="logEvent('ready', $event)"
    />
  </div>
</template>
<script src="/node_modules/ckeditor4/ckeditor.js"></script>
<!--<script src="/node_modules/ckeditor4-vue/dist/ckeditor.js"></script>-->
<!--<script src="https://cdn.ckeditor.com/4.19.1/standard-all/ckeditor.js"></script>-->
<script>
// import { MyCustomUploadAdapterPlugin } from "@/components/richText/customUploadAdapter";
import { getToken } from '@/utils/auth'
export default {
  name: 'CkEditor',
  model: {
    prop: 'content',
    event: 'change'
  },
  props: ['modelValue', 'content'],
  emits: ['update:modelValue'],
  data() {
    return {
      img_url:'',
      events: [],
      // editorUrl: "https://xxx/ckeditor/ckeditor.js",
      editorConfig: {
        extraPlugins: 'uploadimage,image2',
        uploadUrl: 'https://apiwx.twzxjy.com/api/v1/public/uploadFile?command=QuickUpload&type=Files&responseType=json',
        filebrowserBrowseUrl: 'https://apiwx.twzxjy.com/api/v1/public/uploadFile',
        filebrowserImageBrowseUrl: 'https://apiwx.twzxjy.com/api/v1/public/uploadFile?type=Images',
        filebrowserUploadUrl: 'https://apiwx.twzxjy.com/api/v1/public/uploadFile?command=QuickUpload&type=Files',
        filebrowserImageUploadUrl: 'https://apiwx.twzxjy.com/api/v1/public/uploadFile',
        imageUploadUrl: 'https://apiwx.twzxjy.com/api/v1/public/uploadFile',

        fileTools_requestHeaders: {
          'Authorization': 'Bearer ' + getToken()
        },
        image2_alignClasses: ['image-align-left', 'image-align-center', 'image-align-right'],
        image2_disableResizer: true,
        removeButtons: 'PasteFromWord'
      }
    }
  },
  computed: {
    editorData: {
      get() {
        return this.modelValue
      },
      set(value) {
        console.log(value)
        this.$emit('update:modelValue', value)
      }
    },
    editorData2: {
      get() {
        return this.content
      },
      set(value) {
        this.$emit('change', value)
      }
    }
  },
  watch: {
    // editorData(val1) {
    //   console.log(val1)
    // }
  },
  methods: {
    logEvent: function(eventName, event) {
      const _this = this
      // console.log(event)
      // 上传请求
      event.on( 'fileUploadRequest', async evt => {
        console.log(evt)
        var fileLoader = evt.data.fileLoader;
        // let formData = new FormData();
        // let xhr = fileLoader.xhr;
        // xhr.setRequestHeader( 'Authorization', 'Bearer ' + getToken() );
        // xhr.open( 'POST', fileLoader.uploadUrl, true );
        // formData.append( 'multipartFile', fileLoader.file);
        // fileLoader.xhr.send( formData );


        // 测试
          const xhr_ = new XMLHttpRequest()
          xhr_.onreadystatechange=function()
          {
              if (xhr_.readyState==4 && xhr_.status==200)
              {
                // console.log(xhr_)
                _this.img_url = xhr_.response.data.full_path
                // var data = evt.data;
                // data.url = res_url
                // 用官方的方法进行访问
                let xhr = fileLoader.xhr;
                xhr.open( 'POST', fileLoader.uploadUrl, true );
                xhr.setRequestHeader('Authorization', 'Bearer ' + getToken())
                let formData = new FormData();
                formData.append( 'multipartFile', fileLoader.file);
                fileLoader.xhr.send( formData );
              }
          }
          xhr_.open('POST', fileLoader.uploadUrl, true)
          xhr_.setRequestHeader('Authorization', 'Bearer ' + getToken())
          xhr_.responseType = 'json'

          const data = new FormData();
          // 上传参数就根据后端的处理而设置了
          data.append( 'file', fileLoader.file );
          xhr_.send(data);

        // 测试结束

        // Prevented the default behavior.
        evt.stop()
      })
      // 回调
      event.on( 'fileUploadResponse', async evt => {
        console.log(evt)
        evt.stop();
        evt.data.url = _this.img_url
        // var data = evt.data;
        // let xhr = data.fileLoader.xhr;
        // let response = xhr.responseText;
        // let imgUrl = JSON.parse(response).data;
        // if(!imgUrl){
        //     data.message = imgUrl   // 这是失败alert提示信息
        //     evt.cancel();
        // }else{
        //     data.url = imgUrl   // 返回到“图像信息”那里的URL框里面
        // }
      })
      // if (this.events.length > 19) {
      //   this.events.pop()
      // }
      //
      // const eventData = {
      //   name: eventName,
      //   timestamp: this.getCurrentTimestamp()
      // }
      //
      // this.events.unshift(eventData)

      // console.log(eventData.timestamp, eventData.name, event)
    },

    getCurrentTimestamp: function() {
      return new Intl.DateTimeFormat('en', {
        hour12: false,
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      }).format(new Date())
    },

    clearEventsLog: function() {
      this.events = []
    }
  }
}
</script>
<style>
.ck-editor__main{
  max-height: 350px;
  overflow: scroll;
}
</style>
